<template>
    <div class="register">
        <div class="relative">
            <el-form :model="registerform" label-width="auto" label-position="left" size="defult" style="border: 1px rgb(65, 160, 255) solid;"
                class="form">
                <div>
                    <h2>注册</h2>
                </div>
                <el-form-item label="姓名">
                    <el-input v-model="registerform.name" />
                </el-form-item>
                <el-form-item label="密码" prop="passWord">
                    <el-input v-model="registerform.password" type="password" show-password />
                </el-form-item>
                <el-form-item label="部门">
                    <el-select v-model="registerform.department">
                        <el-option label="PE" value="PE" />
                        <el-option label="QE" value="QE" />
                        <el-option label="PM" value="PM" />
                        <el-option label="Basics" value="Basics" />
                        <el-option label="IT" value="IT" />
                    </el-select>
                </el-form-item>
                <el-form-item label="位置">
                    <el-input v-model="registerform.location" />
                </el-form-item>
                <el-form-item label="主管工号">
                    <el-input v-model="registerform.manage" />
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="registerform.email" />
                </el-form-item>
                <el-form-item label="座机号码">
                    <el-input v-model="registerform.landline" />
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="registerform.phone" />
                </el-form-item>
                <el-form-item class="button-group">
                    <el-button type="primary" @click="onSubmit()">Create</el-button>
                    <el-button @click="Back()">Cancel</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { useRouter } from 'vue-router';
const router = useRouter()

const registerform = reactive({
    name: '',
    password: '',
    department: 'Basics',
    location: '',
    manage: '',
    email: '',
    landline: '',
    phone: '',
})

const onSubmit = () => { }

const Back = () => {
    console.log("Back Login");
    router.push({ path: '/login' });
}

</script>

<style lang="scss" scoped>
.register {
    width: 100%;
    height: 100%;

    .relative {
        width: 100%;
        height: 100%;
        text-align: center;

        .form {
            width: 20%;
            margin: 0 auto;

            .button-group{
                display: flex;
                justify-content: space-between;
            }
        }
    }

}
</style>